<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 视口设置 -->
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width"> <!-- 禁止用户缩放页面 -->
    <title>公主请点菜</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #FFC0CB; /* 浅粉色背景 */
        }

        .container {
            max-width: 1200px;
            margin: 20px auto;
            padding: 20px;
            background: white;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            border-radius: 8px;
        }

        .header {
            text-align: center;
            margin-bottom: 20px;
        }

        .menu {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
        }

        .menu-item {
            flex: 0 0 calc(33.333% - 20px);
            margin-bottom: 20px;
            padding: 20px;
            border: 1px solid #ddd;
            border-radius: 8px;
            background-color: #f9f9f9;
            box-sizing: border-box;
            text-align: center;
            transition: transform 0.3s;
        }

        .menu-item:hover {
            transform: translateY(-10px);
        }

        .menu-item img {
            max-width: 100%;
            height: auto;
            border-radius: 8px;
            margin-bottom: 10px;
        }

        .menu-item h2 {
            margin: 0;
            font-size: 1.2em;
        }

        .menu-item p {
            margin: 5px 0 0;
            color: #666;
        }

        .add-to-cart {
            padding: 5px 10px;
            font-size: 14px;
            width: auto;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s;
        }

        .add-to-cart:hover {
            background-color: #45a049;
        }

        .cart {
            margin-top: 20px;
            padding: 20px;
            background: white;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            border-radius: 8px;
        }

        .cart h2 {
            margin-top: 0;
            text-align: center;
        }

        .cart-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 0;
            border-bottom: 1px solid #ddd;
        }

        .cart-item:last-child {
            border-bottom: none;
        }

        .remove-from-cart {
            padding: 8px 12px;
            font-size: 14px;
            width: auto;
            background-color: red;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s;
        }

        .remove-from-cart:hover {
            background-color: #d32f2f;
        }

        .clear-cart-btn {
            display: block;
            width: 100%;
            padding: 12px 0;
            font-size: 18px;
            background-color: red;
            color: white;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            transition: background-color 0.3s;
            text-align: center;
        }

        .clear-cart-btn:hover {
            background-color: #d32f2f;
        }

        .floating-heart {
            position: fixed;
            width: 30px;
            height: 30px;
            background-color: deeppink;
            clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
            animation: float 5s infinite;
            z-index: 1000;
            opacity: 0.8;
        }

        @keyframes float {
            0% {
                transform: translateY(0) translateX(100vw);
            }
            100% {
                transform: translateY(-10vh) translateX(-100vw);
            }
        }
    </style>
</head>
<body>

    <div class="container">
        <div class="header">
            <h1>公主请点菜</h1>
        </div>
        <div class="menu" id="menu">
            <div class="menu-item">
                <img src="path/to/dish1.jpg" alt="锅包肉">
                <h2>锅包肉</h2>
                <p>1个亲亲</p>
                <button class="add-to-cart" onclick="addToCart('锅包肉')">添加到购物车</button>
            </div>
            <div class="menu-item">
                <img src="path/to/dish2.jpg" alt="鱼香肉丝">
                <h2>鱼香肉丝</h2>
                <p>1个亲亲</p>
                <button class="add-to-cart" onclick="addToCart('鱼香肉丝')">添加到购物车</button>
            </div>
            <div class="menu-item">
                <img src="path/to/dish3.jpg" alt="麻婆豆腐">
                <h2>麻婆豆腐</h2>
                <p>1个亲亲</p>
                <button class="add-to-cart" onclick="addToCart('麻婆豆腐')">添加到购物车</button>
            </div>
            <div class="menu-item">
                <img src="path/to/dish4.jpg" alt="红烧肉">
                <h2>红烧肉</h2>
                <p>1个亲亲</p>
                <button class="add-to-cart" onclick="addToCart('红烧肉')">添加到购物车</button>
            </div>
            <div class="menu-item">
                <img src="path/to/dish5.jpg" alt="清蒸鲈鱼">
                <h2>清蒸鲈鱼</h2>
                <p>1个亲亲</p>
                <button class="add-to-cart" onclick="addToCart('清蒸鲈鱼')">添加到购物车</button>
            </div>
            <div class="menu-item">
                <img src="path/to/dish6.jpg" alt="糖醋排骨">
                <h2>糖醋排骨</h2>
                <p>1个亲亲</p>
                <button class="add-to-cart" onclick="addToCart('糖醋排骨')">添加到购物车</button>
            </div>
            <div class="menu-item">
                <img src="path/to/dish7.jpg" alt="地三鲜">
                <h2>地三鲜</h2>
                <p>1个亲亲</p>
                <button class="add-to-cart" onclick="addToCart('地三鲜')">添加到购物车</button>
            </div>
            <div class="menu-item">
                <img src="path/to/dish8.jpg" alt="西红柿炒鸡蛋">
                <h2>西红柿炒鸡蛋</h2>
                <p>1个亲亲</p>
                <button class="add-to-cart" onclick="addToCart('西红柿炒鸡蛋')">添加到购物车</button>
            </div>
            <div class="menu-item">
                <img src="path/to/dish9.jpg" alt="青椒肉丝">
                <h2>青椒肉丝</h2>
                <p>1个亲亲</p>
                <button class="add-to-cart" onclick="addToCart('青椒肉丝')">添加到购物车</button>
            </div>
            <div class="menu-item">
                <img src="path/to/dish10.jpg" alt="干煸四季豆">
                <h2>干煸四季豆</h2>
                <p>1个亲亲</p>
                <button class="add-to-cart" onclick="addToCart('干煸四季豆')">添加到购物车</button>
            </div>
        </div>

        <div class="cart" id="cart">
            <h2>购物车</h2>
            <div id="cartItems"></div>
            <p id="cartTotal">总价：0个亲亲</p>
            <button class="clear-cart-btn" onclick="clearCart()">清空购物车</button>
        </div>
    </div>

    <div id="heartContainer"></div>

    <script>
        let cart = {};
        let cartTotal = 0;

        function updateCartDisplay() {
            let cartItems = document.getElementById('cartItems');
            cartItems.innerHTML = '';
            let totalItems = 0;

            for (let item in cart) {
                if (cart.hasOwnProperty(item)) {
                    let cartItem = document.createElement('div');
                    cartItem.className = 'cart-item';

                    let itemName = document.createElement('span');
                    itemName.textContent = item;

                    let itemCount = document.createElement('span');
                    itemCount.textContent = ' x ' + cart[item];

                    let removeBtn = document.createElement('button');
                    removeBtn.className = 'remove-from-cart';
                    removeBtn.textContent = '移除';
                    removeBtn.onclick = function() {
                        removeFromCart(item);
                    };

                    cartItem.appendChild(itemName);
                    cartItem.appendChild(document.createTextNode(' '));
                    cartItem.appendChild(itemCount);
                    cartItem.appendChild(document.createTextNode(' '));
                    cartItem.appendChild(removeBtn);
                    cartItems.appendChild(cartItem);
                    totalItems += cart[item];
                }
            }

            document.getElementById('cartTotal').textContent = '总价：' + totalItems + '个亲亲';
        }

        function addToCart(itemName) {
            if (cart[itemName]) {
                cart[itemName]++;
            } else {
                cart[itemName] = 1;
            }
            cartTotal = Object.values(cart).reduce((a, b) => a + b, 0);
            updateCartDisplay();
        }

        function removeFromCart(itemName) {
            if (cart[itemName]) {
                cart[itemName]--;
                if (cart[itemName] === 0) {
                    delete cart[itemName];
                }
            }
            cartTotal = Object.values(cart).reduce((a, b) => a + b, 0);
            updateCartDisplay();
        }

        function clearCart() {
            cart = {};
            cartTotal = 0;
            updateCartDisplay();
        }

        const heartContainer = document.getElementById('heartContainer');

        function createFloatingHeart() {
            const heart = document.createElement('div');
            heart.classList.add('floating-heart');
            heart.style.left = `${Math.random() * window.innerWidth}px`;
            heart.style.top = `${Math.random() * window.innerHeight}px`;
            heart.style.animationDuration = `${Math.random() * 5 + 3}s`;
            heart.style.animationDelay = `${Math.random() * 5}s`;
            heartContainer.appendChild(heart);

            setTimeout(() => {
                heartContainer.removeChild(heart);
            }, 10000);
        }

        for (let i = 0; i < 5; i++) {
            createFloatingHeart();
        }

        setInterval(createFloatingHeart, 3000);

        updateCartDisplay();
    </script>

</body>
</html>